<script>
import {getUser} from "../utils/utils";
export default {
  name: "UserView",
  data(){
    return{
      user:{},
      activeIndex: 'UserIndex',
      babies:[
        {name:"大宝",url:"/dabao"},
        {name:"小棉袄",url:"/xiaomianao"},
        {name:"小铁蛋",url:"/xiaotiedan"}
      ],

      btnFlag: false,
    }
  },
  mounted() {
    // 此处true需要加上，不加滚动事件可能绑定不成功
    window.addEventListener("scroll", this.scrollToTop, true);
  },
  destroyed() {
    window.removeEventListener("scroll", this.scrollToTop, true);
  },
  methods:{
    logout(){
      this.$confirm('确定注销并退出系统吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        window.sessionStorage.removeItem("user")
        window.sessionStorage.removeItem("token")
        this.$router.push('/')
      }).catch(() => {});
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
      // this.$router.push(keyPath)
    },
    backTop() {
      const that = this;
      let timer = setInterval(() => {
        let ispeed = Math.floor(-that.scrollTop / 5);
        document.documentElement.scrollTop = document.body.scrollTop =
          that.scrollTop + ispeed;
        if (that.scrollTop === 0) {
          clearInterval(timer);
        }
      }, 16);
    },
    // 为了计算距离顶部的高度，当高度大于60显示回顶部图标，小于60则隐藏
    scrollToTop() {
      const that = this;
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      that.scrollTop = scrollTop;
      if (that.scrollTop > 30) {
        that.btnFlag = true;
      } else {
        that.btnFlag = false;
      }
    },
  },
  created() {
    this.user=getUser()
    console.log(this.user.headphoto)
  }
}
</script>

<template>
  <div>
    <!--上方导航栏-->
    <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
      router
    >
      <el-menu-item index="/UserView/UserIndex">
        <div id="siteName">
          <i class="el-icon-house"></i>儿童成长社交记录平台
        </div>
      </el-menu-item>
      <el-submenu index="2">
        <template slot="title"><i class="el-icon-news"></i>社区</template>
        <el-menu-item index="Recommend">推荐</el-menu-item>
        <el-menu-item index="Follow">关注</el-menu-item>
        <!--<el-menu-item index="QuestionsAndAnswers">问答</el-menu-item>-->
        <el-menu-item index="Mine">我的</el-menu-item>
      </el-submenu>
      <!--<el-menu-item index="Parenting"><i class="el-icon-dessert"></i>育儿</el-menu-item>-->
      <el-submenu index="4">
        <template slot="title"><i class="el-icon-s-shop"></i>商城</template>
        <el-menu-item index="Buy">买宝贝</el-menu-item>
        <el-menu-item index="Sell">卖宝贝</el-menu-item>
        <el-menu-item index="ShoppingCart">我的购物车</el-menu-item>
        <el-menu-item index="Orders">我的订单</el-menu-item>
        <el-menu-item index="PointsCenter">积分中心</el-menu-item>
      </el-submenu>
      <el-menu-item index="Message"><i class="el-icon-chat-line-square"></i>消息</el-menu-item>
      <!--<div class="info_headPhoto">
        <el-dropdown trigger="click">
          <div>
            <img src="http://192.168.138.131:9000/picture/headPhoto.png" style="height: 55px; width: 55px; border-radius: 50%; border: 1px solid azure;">
            <i class="el-icon-caret-bottom" />
          </div>
          <el-dropdown-menu>
            <el-dropdown-item @click.native="$router.push('/PersonalCenter')">
              <span>个人中心</span>
            </el-dropdown-item>
            <el-dropdown-item divided @click.native="logout">
              <span>退出登录</span>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>-->
      <el-dropdown class="avatar-container right-menu-item hover-effect" style="float:right" trigger="click">
        <div class="avatar-wrapper">
          <img :src="user.headphoto" class="user-avatar" v-if="user.headphoto!==null">
          <img src="http://192.168.138.131:9000/picture/headPhoto.png" class="user-avatar" v-if="user.headphoto===null">
          <i class="el-icon-caret-bottom" />
        </div>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item @click.native="$router.push('/PersonalCenter')">
            <span>个人中心</span>
          </el-dropdown-item>
          <el-dropdown-item divided @click.native="logout">
            <span>退出登录</span>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </el-menu>
    <el-main >
      <div class="main_router">
        <!-- 过渡效果 -->
        <transition name="scale-slide" mode="in-out">
          <router-view ref="child"></router-view>
        </transition>

         <!--缩放过渡-->
<!--         <router-view v-slot="{ Component }">
          <transition name="scale-slide">
            <component :is="Component" />
          </transition>
        </router-view>-->

        <div class="gotop-index" v-show="btnFlag">
          <a href="javascript:;" class="gotop-a" @click="backTop"></a>
        </div>

      </div>
    </el-main>
  </div>
</template>

<style scoped>

main{
  background-image: url('http://192.168.138.131:9000/picture/背景5.jpg');
  height: 100vh;
  width: 100%;
  /*height: 100%;*/
  //background-image: url("../../assets/mypic/lunbo1.jpg");
  background-repeat: no-repeat;
  background-size:cover;
}
.avatar-container {
  margin-right: 30px;

  .avatar-wrapper {
    margin-top: 5px;
    position: relative;

    .user-avatar {
      cursor: pointer;
      width: 40px;
      height: 40px;
      border-radius: 10px;
    }

    .el-icon-caret-bottom {
      cursor: pointer;
      position: absolute;
      right: -20px;
      top: 25px;
      font-size: 12px;
    }
  }
}
#siteName{
  font-size:large;
}
.userIndex{
  position: relative;
}
.info_headPhoto {
  width: 60px;
  height: 60px;
  // background-color: cadetblue;
  float: right;
  //padding-left: 40px;
  //box-sizing: border-box;
}
.main_router {
  width: 100%;
  height: 100%;
  overflow: scroll;
}
.main_router::-webkit-scrollbar {
  width: 0;
  height: 0;
  background-color: transparent;
}
// 过渡效果
.slide-enter-active, .slide-leave-active {
  transition: all 0.1s ease-out;
}

.slide-enter-to {
  position: absolute;
  right: 0;
}

.slide-enter-from {
  position: absolute;
  right: -100%;
}

.slide-leave-to {
  position: absolute;
  left: -100%;
}

.slide-leave-from {
  position: absolute;
  left: 0;
}
.wrap_box{

}
/*返回顶部*/
.gotop-index {
  position: fixed;
  right: 0.6rem;
  bottom: 1.6rem;
  display: block;
  width: 2rem;
  height: 2rem;
  background: #fff;
  box-shadow: 0px 0px 4px #ff0000;
  display: flex;
  border-radius: 50%;
  z-index: 999;
}
.gotop-a {
  display: block;
  width: 1.2rem;
  height: 1.2rem;
  background: url("../../assets/mypic/backtop1.jpeg") no-repeat 0 0;
  background-size: 1.2rem;
  margin: auto;
}

</style>
